AJAX переходы по страницам

[Batyabest]

Добрый день.
Сделал AJAX навигацию, при переходе по ссылкам меняется только контентная часть. Все было сделано для того, чтобы не перегружался плеер, работающий на сайте.
Работает все этим скриптом:

$(document).ready(function() {
	$('a.menuside').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
	$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});

Но проблема во в чем, если я перехожу с меню со страницы site.ru на страницу site.ru/razdel - все работает как надо.
Если же я сразу же пытаюсь перейти со страницы site.ru/razdel на страницу site.ru/razdel/razdel - то происходит просто переход по ссылке, а, значит, обновление страницы.

Но если после первого перехода обновить страницу (site.ru/razdel) и кликнуть по ссылке перехода на site.ru/razdel/razdel - то все работает как положено. Почему не работает 2 перехода по очереди?

[Alex_63]

Batyabest,

(function() {
	$('a.menuside').on('click', function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
		$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
			$('#wrapcontent').fadeOut(300, function() {
				history.pushState(null, null, murl);
				$(this).html(data).fadeIn(800);
			});
		});
	})
})();

[Batyabest]

Спасибо, попробую, отпишусь!

[Batyabest]

(function() {
	$('a.menuside').on('click', function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
		$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
			$('#wrapcontent').fadeOut(300, function() {
				history.pushState(null, null, murl);
				$(this).html(data).fadeIn(800);
			});
		});
	})
})();

Не работает. Пытался даже разными скриптами осуществлять работу.
1. Ссылка с меню в боковом меню - переход работает как положено, через ajax. Здесь работает этот скрипт:

$(document).ready(function() {
	$('a.menuside').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
		var mtpl = $(this).data('mtpl');
	$.post(document.location.href, {action:action,mid:mid,mtpl:mtpl}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});

После перехода в контентной части сайта появляются нужные нам блоки, со ссылками, а адрес в строке браузера подменяется путем

history.pushState(null, null, murl);

И тут уже при переходе по ссылке из контентной части сайта (не из бокового меню), переход по ajax не работает, происходит обычный переход по ссылке, с перезагрузкой страницы.
Здесь работать должен этот скрипт:

$(document).ready(function() {
	$('a.playlist').click(function(m) {
		m.preventDefault();
		var action = $(this).data('action');
		var murl = $(this).data('murl');
		var mid = $(this).data('mid');
	$.post(document.location.href, {action:action,mid:mid}, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
	})
});

Они идентичны, за исключением класса ссылки.
Обратный же переход по ссылкам из бокового меню работает как надо.

Скажите, где что неправильно написано?

[Alex_63]

Batyabest,
А так ?

$('a.menuside,a.playlist').on('click', function(m) {
	m.preventDefault();
	var action = $(this).data('action'),
		mid = $(this).data('mid'),
		mtpl = $(this).data('mtpl');
	var obj = {action:action,mid:mid};
	if (mtpl) { obj['mtpl'] = mtpl; }
	$.post(document.location.href, obj, function(data) {
		$('#wrapcontent').fadeOut(300, function() {
			history.pushState(null, null, murl);
			$(this).html(data).fadeIn(800);
		});
	});
})

[Botik21]

После обновления контент части надо обработчики на a.playlist по новой повесить

[Alex_63]

Botik21,
Насколь я помню, метод on в jQuery вешает обработчики не ток на те элементы, которые уже есть на момент срабатывания скрипта, но и на те, которые появляются после ...
http://jquery.page2page.ru/index.php5/On

[Botik21]

Да, вы правы.

[Batyabest]

Как же тогда мне поправить скрипт, чтобы обработчики навешивались?

[Batyabest]

Alex_63, Botik21, Rise,
Вот сайт http://rock33.ru/
При включении музыки на главной из списка треков снизу - все работает как положено.

При переходе в пункт меню "Музыка" - плеер работает нормально.
Проблема была в том, чтобы перейти уже в какой-то раздел, например, "Поп"
Это я решил таким путем:
В конце скрипта

$('head').append("<script src='/assets/theme/js/script.js'></script>");

Но чувствую, что это сильно костыльное решение, потому что в итоге этот скрипт грузится на странице 2 раза. Как сделать все по фен-шую?

Но вот уже со следующей проблемой я таким образом справится не смог.
Дело в том, что если мы таким образом переходим в раздел "Поп" и там пытаемся запустить музыку, то она открывается не в плеере, а в новом окне.
В консоли путем команды getEventListeners($0) Видим, что нет объекта.
http://prntscr.com/bbazbx
Если же обновить станицу, то по той же команде видим объект
http://prntscr.com/bbaz6r
И по клику музыка открывается в плеере как положено.

Почему так происходит не могу понять, подскажите, люди добрые)))